<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>设置-个人信息</title>
     <link rel="icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css" />
</head>

<body>
   	<!--页面顶部白条条，由js动态加载-->
	<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
	<div class="nav-bottom"></div>
    <script type="text/javascript">$(".nav-bottom").load("top.html");</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="pages/userInfo/distpicker.data.js"></script>
<script type="text/javascript" src="pages/userInfo/distpicker.js"></script>
<script type="text/javascript" src="pages/userInfo/main.js"></script>
<script src="js/model/cartModel.js"></script>
<script src="js/axios.min.js"></script>
    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g home">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo"><img src="img/_/photo.png" alt=""></div>
                        <div class="person-account">
                            <span class="name">{{user.username}}</span>
                            <span class="safe"><a href="#">退出登录 </a></span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="list-items">
                        <dl>
							<dt><i>·</i> 订单中心</dt>
							<dd ><a href="home-index.html"   >我的订单</a></dd>
							<dd><a href="home-order-pay.html" >待付款</a></dd>
							<dd><a href="home-order-send.html"  >待发货</a></dd>
							<dd><a href="home-order-receive.html" >待收货</a></dd>
							<dd><a href="home-order-evaluate.html" >待评价</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 我的中心</dt>
							<dd><a href="home-person-collect.html" >我的收藏</a></dd>
							<dd><a href="home-person-footmark.html" >我的足迹</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 物流消息</dt>
						</dl>
						<dl>
							<dt><i>·</i> 设置</dt>
							<dd><a href="home-setting-info.html" >个人信息</a></dd>
							<dd><a href="home-setting-address.html" class="list-active" >地址管理</a></dd>
							<dd><a href="home-setting-safe.html" >安全管理</a></dd>
						</dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6">
                    <div class="body userAddress">
                        <div class="address-title">
                            <span class="title">地址管理</span>
                            <a data-toggle="modal" data-target=".edit" data-keyboard="false"   class="sui-btn  btn-info add-new">添加新地址</a>
                            <span class="clearfix"></span>
                        </div>
                        <div class="address-detail">
                            <table class="sui-table table-bordered">
                                <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>地址</th>
                                        <th>联系电话</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(add ,index) in adds" :key="add.id">
                                        <td>{{add.name}}</td>
                                        <td>{{add.province}} {{add.city}} {{add.area}} {{add.address}}</td>
                                        <td>{{add.phone}}</td>
                                        <td>
                                            <a data-toggle="modal" data-target=".edit" data-keyboard="true" @click="updateAddress(add.id)" class="sui-btn  btn-info add-new">编辑地址</a>
                                            <a href="#" @click.prevent="deleteAdd(add.id)">删除</a>
                                            <span v-if="add.isDefault===1">默认地址</span>
                                            <button v-if="add.isDefault===0" type="button" @click="setDefaultAddress(add.id)" class="sui-btn  btn-info add-new" >设置为默认地址</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>                          
                        </div>
                        <!--新增地址弹出层-->
                         <div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit" style="width:580px;">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
                                        <h4  id="myModalLabel" v-if="isEdit" class="modal-title">修改地址</h4>
                                        <h4 v-else  class="modal-title">新增地址</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form action="" class="sui-form form-horizontal">
                                            <div class="control-group">
                                            <label class="control-label" >收货人：</label>
                                            <div class="controls">
                                                <input type="text" v-model="newAddress.name" class="input-medium">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">所在地区：</label>
                                            <div class="controls">
                                                <div data-toggle="distpicker">
                                                <div class="form-group area" >
                                                    <select class="form-control" v-model="newAddress.province" id="province1" @mouseleave="queryCity(newAddress.province)">
                                                        <option>--请选择省--</option>
                                                        <option v-for="prov in provinces" :key="prov.id" >{{prov.province}}</option>
                                                     </select>
                                                </div>
                                                <div class="form-group area">
                                                    <select class="form-control" v-model="newAddress.city"  id="city1" @mouseleave="queryArea(newAddress.city)">
                                                        <option>--请选择城市--</option>
                                                        <option v-for="city in cirys" :key="city.id">{{city.city}}</option>
                                                    </select>

                                                </div>
                                                <div class="form-group area">
                                                    <select class="form-control" v-model="newAddress.area" id="district1">
                                                        <option>--请选择县区--</option>
                                                        <option v-for="area in areas" :key="area.id">{{area.area}}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            </div>									 
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">详细地址：</label>
                                            <div class="controls">
                                                <input type="text" v-model="newAddress.address"  class="input-large">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">联系电话：</label>
                                            <div class="controls">
                                                <input type="text" v-model="newAddress.phone" class="input-medium">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">邮箱：</label>
                                            <div class="controls">
                                                <input type="text" v-model="newAddress.email" class="input-medium">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">地址别名：</label>
                                            <div class="controls">
                                                <input type="text" v-model="newAddress.siteAlias" class="input-medium">
                                            </div>
                                            <div class="othername">
                                                建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#" class="sui-btn btn-default">父母家</a>　<a href="#" class="sui-btn btn-default">公司</a>
                                            </div>
                                        </div>
                                        
                                        </form>
                                        
                                        
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" data-ok="modal" @click="submit()" class="sui-btn btn-primary btn-large">确定</button>
                                        <button type="button" data-dismiss="modal"  class="sui-btn btn-default btn-large">取消</button>
                                    </div>
                                </div>
                            </div>
						</div>

                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->
</body>
<script src="js/common.js"></script>
<script src="js/vue/vue.js"></script>
<script>
    var address = new Vue({
        el:"#account",
        data:{
            ly,
            adds:[],
            selectedAdd:[],
            provinces:[],
            cirys:[],
            areas:[],
            isEdit:'',
            addesOne:{},
            newAddress:{
                id:'',
                name:'',
                province:'',
                city:'',
                area:'',
                address:'',
                phone:'',
                email:'',
                siteAlias:''
            },
            user:{}
        },
        created(){
            ly.verifyUser()
                .then(resp => {
                    this.user = resp.data;
                    // 页面加载时查询数据库，显示该用户的所有地址
                    this.queryAddress();
                    // 获取所有的省份
                    this.queryAllProvince();
                })
                .catch(() => {
                    // 去登录
                    this.gotoLogin();
                });
        },
        watch: {
            province:{
                deep: true,
                handler() {
                    this.queryCity(this.newAddress.province);
                }
            }
        },
        methods: {
            queryAddress() {
                ly.http.get("/user/address").then( (res) => {
                this.adds = res.data;
                })
            },
            queryAllProvince() {
                ly.http.get("/user/province").then( (res) => {
                    this.provinces = res.data;
                    this.cirys=[];
                    this.areas=[];
                })
            },
            queryCity(province) {
                let p=this.provinces.find(prov=>prov.province===province);
                ly.http.get("user/city?pid="+p.provinceid).then( (res) => {
                    this.cirys = res.data;
                    this.areas=[];
                })

            },
            queryArea(cityname) {
                console.log(cityname);
                let c = this.cirys.find(ci=>ci.city===cityname);
                console.log(c);
                ly.http.get("user/areas?cid="+c.cityid).then(res=>{
                    this.areas = res.data;
                })
            },
            submit() {
                if (this.isEdit) {
                    // 调用修改方法
                    this.updataAdd();
                } else {
                    // 调用新增方法
                    this.addAddress();
                }

            },
            addAddress() {
                ly.http.post("user/addAddress", this.newAddress).then(res=>{
                    this.queryAddress();
                    // 提示成功
                    alert("保存成功了");
                    this.newAddress ={};
                }).catch(()=>{
                    alert("保存失败！");
                })
            },
            updataAdd() {
                ly.http.put("user/updateAddress", this.newAddress).then(res=>{
                    this.queryAddress();
                    // 提示成功
                    alert("修改成功了");
                    this.isEdit = null;
                    this.newAddress ={};
                }).catch(()=>{
                    alert("修改失败！");
                })
            },
            deleteAdd(id) {
                console.log(id);
                ly.http.delete("user/deleteAdd?id="+id).then(()=>{
                    this.adds=[];
                    this.queryAddress();
                    alert("删除成功！");
                }).catch(()=>{
                    alert("删除失败！");
                })
            },
            setDefaultAddress(id) {
                console.log(id);
                ly.http.put("user/setDefaultAddress?id="+id).then(()=>{
                    this.queryAddress();
                    alert("设置成功了");
                })
            },
            updateAddress(id) {
                this.isEdit = true;
                console.log(this.isEdit);
                // 会写地址
                ly.http.get("user/queryAddersById?id="+ id).then(res=>{
                    this.newAddress=res.data;

                });
            },
            gotoLogin() {
                window.location = "login.html?returnUrl=" + window.location;
            },
        }
    });
</script>
</html>